<template>
  <div class="comer">
    <CommonHeader :propdatas="2"></CommonHeader>
    <div class="homnav">
      <img src="../assets/images/teamnav.png" alt="" class="homnavpng">
    </div>
    <div class="all">
    <div class="naver">
       <div class="tit">带你了解房品优选</div>
      <div class="tit2">构建“房-家-生活”体系生态圈为愿景的垂直生态平台</div>
       <div class="linearea">
         <div class="linearealeft">
            <div class="minleleft">
              <img src="../assets/images/leftlogo.png" alt="" class="minleleftimg">
            </div>
           <div class="minleright">
             <div class="rightlineone">定 位</div>
             <div class="rightlinetwo">一手房信息咨询及交易平台</div>
           </div>
         </div>
         <div class="linearearight">
           <div v-for="(item,index) in list" :key="index" class="rightline">
             <div class="rightlineone">{{item.name}}</div>
             <div class="rightlinetwo">{{item.name2}}</div>
           </div>
         </div>

       </div>
    </div>
    <div class="result">
      企业简介
    </div>
    <div class="result2">杭州电猪科技有限公司专注于一手房交易，构建“房-家-生活”体系生态圈为愿景的垂直生态平台。公司秉承“房住不炒”的理念，将互联网思维渗透到传统房产行业，实现房产行业的转型变革，促进市场平稳健康发展。同时紧跟分享型经济的营销潮流，为用户带来更优惠、更便捷、更可靠的房产服务。</div>
      <div class="resultlistall">
        <div class="titone">合作案例</div>
        <div class="tittwo">News center</div>
      </div>

  </div>
    <div class="teammodel">
      <img src="../assets/images/team.png" alt="" class="teampng">
    </div>
    <div class="model4">
       <div v-for="(item,index) in listnull" :key="index" class="listnullline">
          <div class="line1">{{ item.num }}</div>
          <div class="line2">{{ item.minarea }}</div>
          <div class="line3">{{ item.area }}</div>
         <div class="minline" v-if="index!=3"></div>
       </div>
    </div>
    <div class="model5">
       <img src="../assets/images/ssbg.png" alt="" class="model5png">
    </div>
    <div class="model6">
      <div class="form">
        <div class="formtit">表单填写</div>
        <div class="formword">
          <div class="formwordleft">
            <div class="lineline">
              <img src="../assets/images/tou.png" alt="" class="lineimg">
              <input type="text" placeholder="称呼姓名" class="lineinput" v-model="name">
            </div>
            <div class="lineline" style="margin-left: 20px">
              <img src="../assets/images/phone.png" alt="" class="lineimg">
              <input type="text" placeholder="联系电话" class="lineinput" v-model="phone" maxlength="11">
            </div>
          </div>
          <div class="formwordright" @click="submit">提交信息</div>
        </div>
      </div>
    </div>
    <div class="model7">
      <img src="../assets/images/map.png" alt="" class="mappng">
      <div class="information">
         <div class="tit">{{ companyName }}</div>
         <div>电话：{{ companyPhone }} </div>
         <div>地址：{{ companyAddress }}</div>
      </div>
    </div>
    <CommonBottom></CommonBottom>
  </div>
</template>

<script>

import CommonHeader from '../components/commonHeader'
import CommonBottom from "@/components/commonBottom";
import {updateFrontUser} from "@/api/vip";
export default {
  name:'Home',
  components:{
    CommonBottom,
    CommonHeader,
    // Carousel
  },
  data(){
    return{
      chosenKind:'',
      companyName:'',
      companyPhone:'',
      companyAddress:'',
      name:'',
      phone:'',
      kindList:[
        {name:"首页",value:0},
        {name:"楼盘查询",value:1},
        {name:"加入我们",value:2},
        {name:"下载APP",value:3},
      ],
      list:[
        {name:"使 命",name2:"让人人都有一个温暖的家",value:0},
        {name:"产品Slogan",name2:"房品优选，不只是便宜一点",value:1},
        {name:"企业精神",name2:"诚信、周到、创新、卓越",value:2},
      ],
      listline:[
        {name:"全部",value:0},
        {name:"余杭",value:1},
        {name:"江干",value:2},
        {name:"拱墅",value:3},
        {name:"西湖",value:4},
        {name:"滨江",value:5},
        {name:"临安",value:6},
        {name:"下城",value:7},
        {name:"上城",value:8},
        {name:"富阳",value:9},
        {name:"钱塘新区",value:10},
        {name:"杭州周边",value:11},
      ],
      listnull:[
        {
          num:'',
          area:'全国覆盖范围',
          minarea:'省'
        },
        {
          num:'',
          area:'加盟伙伴',
          minarea:'个'
        },{
          num:'',
          area:'签约总量',
          minarea:'套'
        },{
          num:'',
          area:'成交额',
          minarea:'亿'
        }
      ],
      choosen:0,
      tips:[
        {tip:'住宅'},
        {tip:'商业配套'},
        {tip:'多轨交汇'},
      ]
    }
  },
  created() {
    let all=localStorage.getItem('Companyinformation')
    this.companyAddress=JSON.parse(all).companyAddress
    this.companyName=JSON.parse(all).companyName
    this.companyPhone=JSON.parse(all).companyPhone
    this.listnull[0].num=JSON.parse(all).nationalCoverage
    this.listnull[1].num=JSON.parse(all).partner
    this.listnull[2].num=JSON.parse(all).totalContracts
    this.listnull[3].num=JSON.parse(all).turnover
  },
  mounted() {

  },
  methods:{
    submit(){
      const time =this.time();
      let params = {
        action:'website.getJoinUs',
        timestamp: time,
        signature: this.clos_encryptDes("website.getJoinUs", time),
        accessKeyId: "APId1482c4fc9",
        deviceId:'1',
        name:this.name,
        phone:this.phone
      }
      updateFrontUser(params).then(
          (res) => {
            if (res.data.statusCode == 201 && res.data.success == true) {
              this.$message({
                type: 'success',
                message: "信息提交成功，等待回复！"
              });
              this.name=''
              this.phone=''
            }else{
              this.loading = false;
              this.$message({
                type: 'error',
                message: res.data.errorMessage
              });

            }
          }).catch((error) => {
        console.log(error,'99');

      });
    },

    }
}
</script>

<style scoped lang="scss">
.comer{
  .homnav{
    width: 100%;
    height:360px;
   .homnavpng{
     width: 100%;
     height:360px;
   }
  }
  .all{
    padding:0 190px;

  .naver{
    text-align: left;
    margin-top:60px;
    .tit{
      height: 60px;
      font-size: 30px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #141414;
    }
    .tit2{
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666666;
    }
    .linearea{
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #E0E0E0;
      margin-top: 60px;
      padding-bottom:35px ;
      .linearealeft{
        display: flex;
        justify-content: flex-start;
       .minleleft{
         .minleleftimg{
           width: 70px;
           height: 70px;
         }
       }
        .minleright{
          margin-left: 20px;
          margin-top: 10px;
          .rightlineone{
            height: 25px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #141414;
            line-height: 25px;
          }
          .rightlinetwo{
            height: 25px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #999999;
            line-height:25px;
          }
        }
      }
      .linearearight{
        display: flex;
        justify-content: space-around;
        .rightline{
          margin-left: 28px;
          margin-top: 10px;
          .rightlineone{
            height: 25px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #141414;
            line-height: 25px;
          }
          .rightlinetwo{
            height: 25px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #999999;
            line-height: 25px;
          }
        }

      }
    }
  }
  .result{
      height: 60px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #141414;
      line-height: 60px;

      text-align: left;
      margin-top: 40px;
    }
    .result2{
      height: 111px;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
      line-height: 24px;
      text-align: left;
    }
  .resultlistall{
     text-align: left;
    height: 350px;
   .titone{
     height: 54px;
     font-size: 30px;
     font-family: Source Han Sans CN;
     font-weight: 400;
     color: #141414;
     line-height:54px;
   }
    .tittwo{
      height: 20px;
      font-size: 14px;
      font-family: Arial;
      font-weight: 400;
      color: #A1A1A1;
      line-height: 20px;
    }
  }

  }
  .teammodel{
    height:638px;
    background: #F6F6F6;
    padding: 0 190px;
    .teampng{
      width: 100%;
      height:738px ;
      margin-top: -200px;
    }
  }
  .model4{
    padding: 0 190px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    height: 200px;
    .listnullline{
      position: relative;
      margin-top: 45px;
      .line1{
        font-size: 52px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;
      }
      .line2{
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        line-height: 36px;
        position: absolute;
        right: -10px;
        top: -10px;
      }
      .line3{
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      }
      .minline{
        width: 2px;
        height: 75px;
        background: #D5D5D5;
        margin:0 40px ;
        position: absolute;
        right: -90px;
        top:13px;
      }
    }
  }
  .model5{
    width: 100%;
    height: 180px;
    .model5png{
      width: 100%;
      height: 180px;
    }
  }
  .model6{
    height:340px;
    padding: 0 190px;
    .form{
      width: 100%;
      height: 181px;
      background: #FFFFFF;
      box-shadow: 0px 7px 35px 0px rgba(41, 41, 41, 0.32);
      border-radius: 10px;
      padding: 40px;
      margin-top: -90px;
      position: relative;
      z-index: 10;
      .formtit{
        height: 70px;
        font-size: 26px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #141414;
        line-height: 70px;
        text-align: left;
      }
      .formword{
        display: flex;
        justify-content:space-between ;
        .formwordleft{
          display: flex;
          justify-content:flex-start ;
          margin-top: 25px;
          .lineline{
            width: 220px;
            height: 40px;
            line-height:40px;
            background: #FFFFFF;
            border: 1px solid #B3B3B3;
            border-radius: 8px;
            display: flex;
            justify-content: flex-start;
            .lineimg{
              width: 25px;
              height: 25px;
              margin: 6px 8px 0 10px;
            }
            .lineinput{
             border: none;
              outline: none;
            }
          }
        }
        .formwordright{
          width: 210px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          background: #F22525;
          border-radius: 6px;
          font-size: 20px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
          margin-top: 15px;
        }
      }
    }

  }
  .model7{
    width: 100%;
    height: 400px;
    position: relative;
    .mappng{
      width: 100%;
      height: 400px;
    }

    .information{
      width: 500px;
      height: 200px;
      position: absolute;
      left: 42%;
      top: 36%;
      background: url("../assets/images/card.png")no-repeat;
      background-size: 100% 100%;
      text-align: left;
      padding: 10px 0 0 50px;
      box-sizing: border-box;
      &:hover{
        cursor:pointer
      }
      .tit{
        margin-top: 20px;
        height: 40px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #141414;
        line-height: 40px;
      }

    }

  }
}
</style>
